<template>
    <view class="sign">
        <view v-if="indexList.length<=0" class="no_data_box">
					<u-empty text="暂无签到记录" mode="list"></u-empty>
				</view>
        <view class="list" v-else>
                
            <view class="item" @click="goDetail(item)" v-for="(item, index) in indexList" :key="index">
                <view class="image"><image :src="item.task.image" mode="aspectFill"></image></view>
                <view class="title">
                    <text class="t1">{{ item.task.name }}</text>
                    <text class="status" :class="{status_1: item.task.status_text == '已结束'}">{{ item.task.status_text }}</text>
                </view>
                <view class="logs">
                    <view class="s1">
                        <text class='c1'>{{ item.logs[1] ? item.logs[1] : 0 }}</text>
                        <text class='c2'>签到（天）</text>
                    </view>

                    <view class="s1">
                        <text class='c1'>{{ item.logs[2] ? item.logs[2] : 0 }}</text>
                        <text class='c2'>存疑</text>
                    </view>
                </view>
            </view>

        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                indexList: [],
            }
        },
        onLoad() {
            if (!this.vuex_token) {
                uni.showModal({
                    title: '警告',
                    content: '请先登录，才能进行下面操作！',
                    showCancel:false,
                    success: function (res) {
                        uni.navigateBack()
                    }
                })
                return;
            }
            this.loadmore()
        },
        methods: {
            scrolltolower() {
                this.loadmore()
            },
            loadmore() {
                let that = this
                that.$API.getUserTaskList().then(res => {
                    that.indexList = [];
                    res.data.list.forEach(v => {
                        that.indexList.push(v)
                    });
                }).catch(err => {
                    console.log('err', err)
                })
            },
            goDetail(item) {
                uni.navigateTo({
					url: '/pages/my/detail?id=' + item.task_id
				})
            }
        }
    }
</script>

<style lang="scss">
	.no_data_box{
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list {
        width: 702rpx;
        margin: 0 auto;
        padding-bottom: 150rpx;
        .item {
            width: 654rpx;
            height: 492rpx;
            display: flex;
            flex-direction: column;
            padding: 24rpx;
            background: #FFFFFF;
            border-radius: 16rpx;
            margin-top: 24rpx;
            position: relative;
            .image {
                width: 654rpx;
                height: 308rpx;
                image {
                    width: 654rpx;
                    height: 308rpx;
                }
            }
            .title {
                position: absolute;
                width: 626rpx;
                height: 72rpx;
                background: rgba(60,60,60,0.6);
                padding: 0 14rpx;
                top: 264rpx;
                left: 24rpx;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .t1 {
                    width: 500rpx;
                    height: 46rpx;
                    line-height: 46rpx;
                    overflow: hidden;
                    font-size: 32rpx;
                    font-weight: 500;
                    color: #ffffff;
                    text-overflow: ellipsis;
                    display:-webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient:vertical;
                }
                .status {
                    width: 110rpx;
                    height: 46rpx;
                    background: #FFFFFF;
                    font-size: 24rpx;
                    font-weight: 500;
                    color: #30D6C2;
                    line-height: 46rpx;
                    text-align: center;
                }
            }
            .logs {
                width: 654rpx;
                height: 132rpx;
                background-color: #fff;
                display: flex;
                flex-direction: row;
                align-items: center;
                padding-top: 40rpx;
                .s1 {
                    width: 50%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    padding: 7rpx 0;
                    &:nth-child(1) {
                        &::after {
                            content: "";
                            position: absolute;
                            width: 2rpx;
                            height: 132rpx;
                            background-color: #ECECEC;
                            right: 0;
                            top: 0;
                        }
                    }
                    .c1 {
                        height: 56rpx;
                        font-size: 48rpx;
                        font-weight: 500;
                        color: #606266;
                        line-height: 56rpx;
                    }
                    .c2 {
                        height: 56rpx;
                        font-size: 32rpx;
                        font-weight: 500;
                        color: #909399;
                        line-height: 56rpx;
                    }
                }
            }
        }
    }
</style>

